import ProTable from '@ant-design/pro-table';

import {useMount, useRequest} from 'ahooks';
import {findBySelectValueListPeomise, getResult} from '@/services/ant-design-pro/attribute';
import {editMenu, findByDataMenuListSelect, findByDataMenuTreeList,} from '@/services/ant-design-pro/menu';
import React, {useRef, useState} from 'react';
import {BetaSchemaForm, ProFormInstance} from '@ant-design/pro-form';
import useEffect from 'rc-util/lib/hooks/useEffect';
import {Button, message} from 'antd';
import Icon, {PlusOutlined} from '@ant-design/icons';



const request = async () => {
  return new Promise<API.SelectItem[]> ( (resolve, reject) => {
    findByDataMenuListSelect ()
      .then ( (res) => {
        var selectItems = res.data;
        selectItems.unshift ( {label: '下一单', value: 0} );
        resolve ( selectItems );
      } )
      .catch ( (e) => {
      } );
  } );
};

const valueEnum = {
  all: {text: '全部', status: 'Default'},
  open: {
    text: '未解决',
    status: 'Error',
    suffixIcon: 'icon-a-Filter21',
  },
  closed: {
    text: '已解决',
    status: 'Success',
  },
  processing: {
    text: '解决中',
    status: 'Processing',
  },
};

const columnDialog = [
  {
    title: '基本信息',
    valueType: 'group',
    columns: [
      {
        title: 'id',
        dataIndex: 'id',
        key: 'id',
        initialValues: 0,
        hideInForm: true,
      },
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        width: 'md',
      },
      {
        title: '排水',
        dataIndex: 'sort',
        width: 'md',
        valueType: 'digit',
      },
      {
        title: '类型',
        dataIndex: 'type',
        valueType: 'select',
        width: 'md',
        attribute: 'user_auth_occupational',
        valueEnum: await getResult ( 'backsatgemenutype' ),
      },
      {
        title: '下一单',
        dataIndex: 'parentId',
        valueType: 'select',
        width: 'md',
        request,
      },
      {
        title: '图标',
        dataIndex: 'icon',
        width: 'md',
      },
      {
        title: '页面',
        dataIndex: 'routePath',
        width: 'md',
      },
      {
        title: '权限字符',
        dataIndex: 'permsKey',
        width: 'md',
      },
      {
        title: '参数',
        dataIndex: 'params',
        valueType: 'jsonCode',
        width: 'md',
      },
      {
        title: '参数',
        dataIndex: 'menuShow',
        valueType: 'switch',
        width: 'md',
      },
    ],
  },
];
type DataItem = {
  name: string;
  state: string;
};
const cloneTbale = () => {
  const column = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: 'md',
    },
    {
      title: '排水',
      dataIndex: 'sort',
      width: 'md',
    },
    {
      title: '类型',
      dataIndex: 'type',
      width: 'md',
      valueType: 'select',
      attribute: 'backsatgemenutype',
    },
    {
      title: '图标',
      dataIndex: 'icon',
    },
    {
      title: '页面',
      dataIndex:
  'routePath',
}
,
  {
    title: '权限字符',
      dataIndex:'permsKey',
  }
,
  {
    title: '参数',
      dataIndex:'params',
      valueType:'jsonCode',
  }
,
  /*{
    title: "status",
    dataIndex: "status",
    valueType: "select",
    attribute: "user_auth_occupational"

  },*/
  {
    title: '删除状态',
      dataIndex : 'deleted',
      valueType: 'select',
      attribute: 'bydeleted',
  }
,
  {
    title: '操作',
      width: '164px',
      key: 'option',
      valueType: 'option',
      render: (_, row, index, action) => [
      <a
        key="link"
        onClick={(a) => {
          console.log ( row );

          editDialogInfo ( row, index );
        }}
      >
        编辑
      </a>,
    ],
  }
,
]
  ;
  const formRef = useRef<ProFormInstance> ();
  const [editDialg, setEditDialg] = React.useState ( false );
  const [columns, setColumns] = useState ( column );
  const [columnDialogs, setColumnDialogs] = useState ( columnDialog );
  const [menuInfo, setMenuInfo] = useState<API.MenuInfo> ();

  function editDialogInfo(row, index) {
    setMenuInfo ( row );
    formRef?.current?.setFieldsValue ( row );
    setEditDialg ( true );
  }

  function hideEditDialg() {
    setMenuInfo ( {id: 0} );
    formRef.current?.resetFields ();
    setEditDialg ( false );
  }

  function openEditDialg() {
    setMenuInfo ( {id: 0} );
    formRef.current?.resetFields ();
    setEditDialg ( true );
  }

  const {
    run: fetchByDataMenuTreeList,
    refresh,
    data: dataList,
    loading,
  } = useRequest ( findByDataMenuTreeList, {
    debounceWait: 100,
    manual: true,
  } );

  useMount ( async () => {
    /*    const promise1 = await findBySelectValueFormListPeomise(columnDialogs);
        console.log(promise1)
        setColumnDialogs(promise1)*/
    fetchByDataMenuTreeList ();
    const promise = await findBySelectValueListPeomise ( columns );
    //   console.log(promise, columns)
    setColumns ( promise );

    console.log ( 'useMount' );
  } );
  useEffect ( async () => {
    /*   const promise1 = await findBySelectValueFormListPeomise(columnDialogs);
       console.log(promise1)
       setColumnDialogs(promise1)*/
    console.log ( 'useEffect' );
  }, [loading] );

  console.log ( columnDialogs );
  return (
    <div>
      <BetaSchemaForm<API.MenuInfo>
        formRef={formRef}
        initialValues={menuInfo}
        onCancel={() => setEditDialg ( false )}
        onVisibleChange={setEditDialg}
        title="菜单管理"
        visible={editDialg}
        layoutType="ModalForm"
        columns={columnDialogs}
        onFinish={async (values) => {
          values.id = menuInfo.id;
          console.log ( values );
          return new Promise<Boolean> ( (resolve, reject) => {
            editMenu ( values )
              .then ( () => {
                message.success ( '操作成功' );
                setEditDialg ( false );
                refresh ();
                resolve ( true );
              } )
              .catch ( () => {
                message.success ( '操作失败' );
                reject ( false );
              } );
          } );
        }}
      />
      <ProTable
        search={false}
        toolBarRender={() => [
          <Button
            onClick={() => {
              formRef.current?.resetFields ();
              openEditDialg ();
            }}
            key="button"
            icon={<PlusOutlined/>}
            type="primary"
          >
            新建
          </Button>,
        ]}
        onDataSourceChange={(d) => {
          console.log ( 'onDataSourceChange', d );
        }}
        onLoad={(d) => {
          // 数据加载完操作
          console.log ( 'onDataSourceChange', d );
        }}
        dataSource={dataList?.data}
        loading={loading}
        columns={columns}
        rowKey="id"
      ></ProTable>
    </div>
  );
};

export default cloneTbale;
